<template>
  <uni-nav-bar title="我的积分" left-icon="left" @clickLeft="redirectTo('index/mine')" :fixed="true" statusBar></uni-nav-bar>
  <environment></environment>
  <!-- 头部卡片 -->
  <view class="integral">
    <view>
      <text>{{ integralAll }}</text>
      <text>可用积分</text>
      <text>累计积分{{ count }}</text>
    </view>
  </view>
  <view class="datas">
    <uni-datetime-picker
      v-model="range"
      type="daterange"
      :border="false"
      :clear-icon="false"
      rangeSeparator="至"
      @change="change"
    />
  </view>
  <!-- 积分列表 -->
  <view class="detail">
    <scroll-view
      scroll-y="true"
      enable-back-to-top
      @scrolltolower="loadMore"
      class="scroll-box"
      :style="{ height: pageHeight + 'px' }"
    >
      <view class="details" v-for="(item, index) in orderLists" :key="index">
        <view>
          <text>{{ item.memo }}</text>
          <text>{{ item.createtime }}</text>
        </view>
        <text>{{ item.score }}</text>
      </view>
      <view v-if="orderLists.length < 1" class="fillings" :style="{ height: pageHeight + 'px' }">
        <image :src="Empty2"></image>
        <text>暂无积分记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { integralList } from '@/gql/user';
import { getDriverID } from '@/stores/driverID';
import { redirectTo } from '@/utils/navigator';
import environment from '@c/pobulic/environment.vue';
import { toPublish } from '@mqtt';
import { format, subDays } from 'date-fns';
import { computed, onMounted, ref } from 'vue';
import { isH5 } from '@/utils/platform';
import { Empty2} from '@/utils/Static';
/**
 * 积分主页
 * @param driver_id  用户ID
 * @param orderLists  积分订单列表
 * @param count  累计积分
 * @param pageHeight  累计积分列表高度
 * @param integralAll  可用积分
 * @param isLoading  是否上拉加载状态
 * @param loadStatus  上拉加载状态
 * @param lastPage  积分订单总页数
 * @param currentPage  当前页数
 */
// static
const driver_id = getDriverID();
const orderLists = ref([]);
const count = ref('');
const pageHeight = ref('');
// data
const now = new Date();
let end = format(now, 'yyyy-MM-dd');
const daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
const range = ref([start, end]);

const integralAll = ref('');
const isLoading = ref(false);
const loadStatus = computed(() => (isLoading ? 'loading' : currentPage.value < lastPage.value ? 'more' : 'noMore'));
const lastPage = ref(1);
const currentPage = ref(1);
onMounted(() => {
  const num=isH5 ? 305 : 330
  //获取可视区域的高度
  uni.getSystemInfo({
    success: function(res) {
      pageHeight.value = (res.windowHeight - num).toString();
    },
  });
});
integral();
/**
 * 获取积分页面信息
 * @param driver_id  用户ID
 * @param page  页数
 * @param start  开始时间
 * @param end  结束时间
 */
function integral() {
  isLoading.value = true;
  const payload = {
    query: integralList,
    variables: {
      driver_id,
      page: currentPage.value,
      start,
      end,
    },
  };
  toPublish('ql/driver/scorelogList', payload, (obj: any) => {
    const { scorelog_list } = obj.data;
    isLoading.value = false;
    integralAll.value = scorelog_list.score;
    orderLists.value = [...orderLists.value, ...scorelog_list.list];
    lastPage.value = scorelog_list.lastpage;
    count.value = scorelog_list.count;
  });
}
/**
 * 加载更多
 */
function loadMore() {
  if (currentPage.value < lastPage.value) {
    currentPage.value++;
    integral();
  }
}
/**
 * 时间筛选
 * @param currentPage  页数
 * @param orderLists  清空积分列表
 * @param start  开始时间
 * @param end  结束时间
 * @return 再次获取积分订单
 */
function change([sta, en]) {
  currentPage.value = 1;
  orderLists.value = [];
  start = sta;
  end = en;
  integral();
}
</script>

<style scoped lang="less">
@import url('../order/less/integral.less');
</style>
<style>
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>
